<template>
    <div>
        <!-- 新增弹出框 -->
        <el-dialog title='新增' :visible.sync='addVisible' width='50%'>
            <el-form ref='addForm' :rules='addRule' :model='addForm' label-width='120px'>

                <el-form-item label='收件人：' prop='receiveMan'>
                    <el-select v-model='addForm.receiveMan' filterable placeholder='请选择'
                               class='handle-select mr10' style='width: 100%'>
                        <el-option
                            v-for='item in receiveManList'
                            :key='item.uId'
                            :label='item.uName'
                            :value='item.uId'>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label='标题：' prop='emailTopic'>
                    <el-input v-model='addForm.emailTopic' type='text'></el-input>
                </el-form-item>

                <el-form-item label='文本域：' prop='emailContent' >
                    <el-input type='textarea' v-model='addForm.emailContent'  :rows='6'></el-input>
                </el-form-item>

                <el-form-item>
                    <el-upload
                        class='upload-demo'
                        action='url'
                        :on-preview='handlePreview'
                        :on-remove='handleRemove'
                        :before-remove='beforeRemove'
                        :http-request='handleUpload'
                        multiple
                        :limit='3'
                        :on-exceed='handleExceed'
                        :file-list='fileList'>
                        <el-button size='small' type='primary'>点击上传</el-button>
                        <!--                        <div slot='tip' class='el-upload__tip'>只能上传jpg/png文件，且不超过500kb</div>-->
                    </el-upload>
                </el-form-item>
            </el-form>

            <span slot='footer' class='dialog-footer'>
                        <el-button @click='addVisible = false'>取 消</el-button>
                        <el-button type='primary' @click="saveAdd('addForm')">确 定</el-button>
                    </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'addEmail',
    data() {
        return {
            //校验规则
            addRule: {
                receiveMan: [{ required: true, message: '请输入收件人', trigger: 'change' }],
                emailTopic: [{ required: true, message: '请输入信件主题', trigger: 'change' },
                    { min: 1, max: 35, message: '长度在 0 到 35 个字符', trigger: 'blur' }],
                emailContent: { min: 1, max: 300, message: '长度在 0 到 300 个字符', trigger: 'blur' }
            },
            //是否展示
            addVisible: false,
            fileList: [],
            addForm: {
                receiveMan: '',//收件人
                emailTopic: '',//标题
                emailContent: '',//信件内容
                fileVoList: []//附件
            },
            receiveManList: []//收件人下拉框
        };
    },
    methods: {
        //初始化表单
        init() {
            //初始化清除表单验证
            this.addForm = {},
                this.$nextTick(() => {
                    this.$refs['addForm'].clearValidate();
                }),
                //初始化收件人下拉框
                this.$http.get('/authserver/userController/selectAllUser.json').then(res => {
                    if (res.data.status) {
                        console.log(res.data.data);
                        this.receiveManList = res.data.data;
                        this.addVisible = true;
                    }
                });
        },
        //上传图片事件
        handleUpload(params) {
            let fd = new FormData();
            fd.append('file', params.file); //传给后台接收的名字 file
            this.$http.post('/basicserver/noticeController/uploadFile.json', fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(res => {
                console.log(res.data.status);
                if (res.data.status) {
                    this.$message.success('图片上传成功');
                    // 将图片地址给到表单.
                    console.log(res.data.data);
                    this.fileList.push(res.data.data);
                }
                params = '';
            });
        },
        //发送信件
        saveAdd(addForm) {
            this.$refs[addForm].validate((valid) => {
                if (valid) {
                    this.addForm.fileVoList = this.fileList;
                    this.$http.post('/basicserver/noticeController/sendEmail.json', this.addForm).then(res => {
                        if (res.data.status) {
                            this.addVisible = false;//隐藏编辑框
                            this.$message.success('发送成功');
                            //调用父组件，刷新页面
                            this.$emit('get-data', null);
                            this.addForm = {};
                            this.fileList = [];
                        }
                    });
                }
            });
        },
        //文件操作
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.fileList = fileList;
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        }
    }
};
</script>

<style scoped>
.upload-demo {
    /*margin-left: 100px;*/
}
</style>
